
@import "../_fonts.scss";
@import "../_common.scss";


#root {
  @media only screen and (min-width: 1000px) {
    display: grid;
    justify-content: center;
  }
}

#App {
  margin: 0px;
  width: 1000px;
  margin-top: 40px;

  .labelWithTooltip {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    grid-column-gap: 10px;
  }

  & > .section {
    background-color: var(--fg-color);
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: var(--card-shadow);

    & > h2 {
      margin-top: 0;
    }

    & > .dict {
      display: grid;
      grid-row-gap: 15px;
      margin-bottom: 25px;

      & > div {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-column-gap: 10px;  
        align-items: center;

        & > .toggleMode {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: max-content;
          grid-column-gap: 10px;
          
          & > .divider {
            width: 2px;
            background-color: var(--icon-vibrant-color);
            transform: rotateZ(20deg) scaleY(1.3);
          }
        }
      }
    }
  }
}